<template>
	<div>
		<div class="cover_c">
			<div class="cover">
				<img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png" alt=""
					style="width:100%;height:100%">
			</div>
		</div>

		<div class="content" v-loading="loading">
			<div class="fixed_box">
				<div class="box_title"><span style="color:red">海选方案</span>已选择</div>
				<div class="selected_number">{{calculate}}</div>
				<div class="middle">/</div>
				<div class="total_number">{{volunteerNum}}</div>
			</div>
			<titles :subtitle='subtitle'></titles>
			<div class="title1">
				<div>“海选”方案<span style="color:darkgrey">&nbsp;(共{{totalNumber}}个）</span></div>
			</div>
			<div class="line"></div>
			<div class="explain">
				基于您的"基准志愿",系统为您推荐以下<span class="number">&nbsp;{{number}}&nbsp;</span>个"院校志愿组"
				<!-- ,共<span class="number">&nbsp;{{originalData.length}}&nbsp;</span>个志愿 -->
				<!-- <div class="more" @click="()=>{this.$router.push('/paralle')}">详细</div> -->
			</div>
			<div class="prepare">
				<!-- &nbsp;&nbsp;根据您选择的“职业岗位”：<span class="preparedata">&nbsp;{{input.ProfessionalPost}}&nbsp;</span>，“专业方向”：<span class="preparedata">&nbsp;{{input.direction}}&nbsp;</span>，
                        “专业名称”：<span class="preparedata">&nbsp;{{input.name}}&nbsp;</span>，“院校性质”：<span class="preparedata">&nbsp;{{input.nature}}&nbsp;</span>，
                        “地理位置”：<span class="preparedata">&nbsp;{{input.position}}&nbsp;</span>，按照院校代码在招生之友、招生手册等参考资料中查询、勾选符合个人意愿的院校志愿（数量可
                        超过规定的数量），形成高考志愿的“限选”方案；当进入“限选”方案后，系统会自动保存此“海选”方案。 -->
				<!-- 在此海选志愿中，考生可根据自己的限选条件（如个人的“职业意向”、“专业方向”需要以及“院校性质”、“地理位置”、“办学条件”、“专业设置”等限制性因素），按照院校代码在“招生之友”、“招生手册”等资料中查询符合自己意愿的院校志愿，并进行勾选<span style="color:red">（必须在最后一个“保一保”志愿组中至少选择一个院校志愿）</span>，形成高考志愿的“限选”方案。 -->
				<h3>如何由“海选”方案生成“限选”方案？</h3>
				<p><span style="font-size: 20px;color: black;">第一步：</span><span
						style="font-size: 20px;color:black;">确立“心仪”专业：</span>依据<span style="color:red;">职业意向</span>确定<span style="color:red;">专业方向</span>，由<span style="color:red;">专业方向</span>确立<span style="color:red;">心仪专业</span>；</p>
				<p><span style="font-size: 20px;color: black;">第二步：</span><span
						style="font-size: 20px;color:black;">确立“心仪”院校：</span>依据海选方案中院校代码，在“招生之友”、“招生手册”等资料中逐一查询、打勾记录所有包含<span style="color:red;">心仪专业</span>的<span style="color:red;">心仪院校</span>;
				</p>
				<p><span style="font-size: 20px;color: black;">第三步：</span><span
						style="font-size: 20px;color:black;">形成“限选”方案：</span>在海选方案中，对上述已打勾记录的心仪院校进行勾选，点击“限选方案”按钮，形成高考志愿的“限选”方案。</p>
				<p><span style="font-size: 20px;color: red;">注意事项：</span><span
						style="font-size: 20px;color:balck;">1.在每一个志愿组中，建议均<span style="color:red;">至少勾选一个</span>
						院校志愿；2.建议在<span style="color:red;">最后一个</span>志愿组中<span style="color:red;">至少勾选一个志愿</span>，
						以进一步增加被录取的机率。3.所选志愿总数量可超过规定的限额（分母的数量）。</span></p>
			</div>
			<div class="item" v-for="(item,index) in totalData" :key="index">
				<div class="subtitle">
					建议的第{{index+1}}志愿: <span class="status"
						v-bind:style='{color:color[index]}'>({{item[0].voluntaryNature}})共{{numberarray[index]}}个</span>
					<span v-if="item[0].isBenchmark"
						style="color:rgba(255, 60, 60, 1);font-family:Noto Sans SC;font-size: 22px;position:relative;left:20px;top:2px">这是您的基准志愿</span>
				</div>
				<tables :tableData='item' :serverselect='serverselect' :basicstatus='basicstatus' :color='color[index]'
					@selection="handleSelection" :tableIndex='index' v-on:totalNumber='totalAmount($event)' v-on:stotalNumber='stotalAmount($event)' :showMore='showmore' :newExam='newExamFlag'>
				</tables>
			</div>
			<div class="leftside">
				<div class="cndns-right-btn">
					<el-link @click="jumpTo('/informationfilling')" :underline="false">
						<i class="el-icon-s-home"></i>
						<div class="text">首页</div>
					</el-link>
				</div>
				<div class="cndns-right-btn">
					<!-- <el-tooltip class="item" effect="light" content="进入往年当量" hide-after="5000" placement="left-start"> -->
						<el-link @click="jumpTo('/BasicVoluntary')" :underline="false">
							<i class="iconfont icon-shangyiye"></i>
							<div class="text">基准志愿</div>
						</el-link>
					<!-- </el-tooltip> -->
				</div>
				<div class="cndns-right-btn">
					<!-- <el-tooltip class="item" effect="light" content="进入往年当量" hide-after="5000" placement="left-start"> -->
						<el-link @click="nextStep()" :underline="false">
							<i class="iconfont icon-xiayiye"></i>
							<div class="text">限选方案</div>
						</el-link>
					<!-- </el-tooltip> -->
				</div>
			</div>
			<!-- <div class="select">
				<el-button class="left" @click="jumpTo('/BasicVoluntary')">返回“基准志愿”</el-button>
				<el-button class="right" type="primary" @click="nextStep()">进入“限选”方案</el-button>
			</div> -->
		</div>
		<el-dialog :visible.sync="dialogVisible" width="760px" :close-on-click-modal="false" :show-close="false">
			<div class="message">
				<img src="../assets/error.png" alt="">
				<div style="margin-top:45px" v-if="messageFlag==0">
					您仅选择了{{selectionFinal.length}}个志愿<br>您还可以至少选择{{volunteerNum-selectionFinal.length}}个志愿</div>
				<div style="margin-top:45px" v-if="messageFlag==1">建议在<span style="color:red">最后一个 </span>志愿组中<span
						style="color:red">至少勾选一个志愿</span>，以进一步增加被录取的机率。
				</div>
				
				<div style="margin-top:45px" v-if="messageFlag==2">超出可选志愿数量</div>
			</div>
			<div slot="footer" class="button" v-if="messageFlag==0||messageFlag==1">
				<el-button @click="handleDialogSelection(1)" class="dialogButtonLeft">重新选择</el-button>
				<el-button @click="handleDialogSelection(2)" type="primary" class="dialogButtonRight">仍要继续</el-button>
			</div>
			<div slot="footer" class="button" v-if="messageFlag==2">
				<!-- <el-button @click="dialogVisible=false" type="primary" class="dialogButtonMiddle" v-if="messageFlag==1">确定</el-button> -->
				<el-button @click="handleDialogSelection(1)" type="primary" class="dialogButtonMiddle">确定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import titles from '../components/Title'
	import tables from '../components/Table'
	import timeCalculate from '../common/timeCalculate'
	export default {
		components: {
			titles,
			tables,
			timeCalculate
		},
		data() {
			return {
				originalData: [],
				messageFlag: 0,
				showmore: 1,
				continue: false,
				calculate: 0,
				dialogVisible: false,
				number: 0,
				basicstatus: false,
				subtitle: '我的"平行志愿"',
				selection: [],
				selectionFinal: [],
				selectionFinalFinal: [],
				groupNumber: 0,
				totaldata: {},
				numberarray:[],
				totalData: [],
				totalNumber: 0,
				stotalNumber: 0,
				// lasttotalNumber :0,
				color: [
					"#F3930C",
					"#894DFF",
					"#00B23C",
					"#FF5433",
					"#FC25D8",
					"#1A7EFF",
				],
				subject: [],
				basic: 0,
				loading: false,
				newExamFlag: true,
				volunteerNum: 0,
				lastGroup: [],
				input: {
					ProfessionalPost: "",
					direction: "",
					name: "",
					nature: "",
					position: "",
				},
				serverselect: [],
			}
		},
		methods: {
			// preparedata(){
			//     let preparafrom = JSON.parse(sessionStorage.preparafrom)
			//     // console.log(preparafrom)
			//     if(preparafrom != 0) {
			//         this.input.ProfessionalPost = preparafrom.jobName
			//         this.input.direction = preparafrom.proDirection
			//         this.input.name = preparafrom.proName
			//         this.input.nature = preparafrom.schoolNature
			//         this.input.position = preparafrom.schoolLocation
			//     }
			// },
			handleSelection(selection) {
				this.calculate = 0
				let tableIndex = selection.pop() //获得表格序号并移除
				this.selection[tableIndex] = selection //通过序号对不同表格多选内容做区分,防止覆盖
				// console.log(this.selection[tableIndex])
				//实时计算已选择志愿数量
				this.selection.forEach(e => {
					e.forEach(el => {
						this.calculate += 1
					})
				})
				// console.log(selection)
			},
			//弹出框选择
			handleDialogSelection(selection) {
				//重新选择
				if (selection == 1) {
					this.dialogVisible = false
					this.selection == []
					this.selectionFinal = []
				}
				//仍要继续
				else {
					// sessionStorage.setItem('chooseinsea', JSON.stringify(this.lastGroup))
					this.jumpTo('/subjectvoluntary')
					this.dialogVisible = false
				}

			},
			//选择下一步后先进行判断
			nextStep() {
				sessionStorage.setItem('fromSelect', 1)
				//存放最后一个志愿组中选择的志愿
				this.lastGroup = []
				//转换数组 方便计算选择了几个志愿
				this.selection.forEach(e => {
					e.forEach(el => {
						this.selectionFinal.push(el)
					})
				})
				//存放最后一个志愿组中选择的志愿
				this.selectionFinal.forEach(e => {
					if (e.volunteerGroup === this.number) {
						this.lastGroup.push(e)
					}
				})
				console.log(this.lastGroup)
				// this.lastGrouplength = lastGroup.length
				//最后一个志愿组中必须选择一个志愿方可继续
				if (this.lastGroup.length <= 0) {
					this.messageFlag = 1
					this.dialogVisible = true

				} else {
					//小于应选数量后弹出警告框
					if (this.selectionFinal.length < this.volunteerNum) {
						this.messageFlag = 0
						this.dialogVisible = true
						return
					}
					// else if(this.selectionFinal.length>this.volunteerNum){
					//     this.messageFlag=2
					//     this.dialogVisible=true
					//     return
					// }
					else {
						// sessionStorage.setItem('chooseinsea', JSON.stringify(this.lastGroup))
						this.jumpTo('/subjectvoluntary')
					}
				}
				// console.log(this.selectionFinal);

			},
			jumpTo(router) {
				//清空nextStep()函数用于计算选择志愿数量的数组
				this.selectionFinal = []
				if (router == "/subjectvoluntary") {
					//组合成对象数组
					this.selection.forEach(e => {
						e.forEach(el => {
							this.selectionFinal.push(el)
						})
					})
					// console.log(this.selection)
					//根据省份志愿数量生成对应数量的专业志愿数组
					for (let i = 0; i < sessionStorage.volunteerNumber; i++) {
						this.subject.push({
							professionalName: "",
							professionalCode: "",
							professionalNumber: i + 1
						})
					}
					//将专业志愿数组作为新元素加入到数组所有对象中
					this.selectionFinal.map((item, index) => {
						this.selectionFinalFinal.push(
							Object.assign(item, {
								professional: this.subject,
								ordernumber: index + 1
							})
						)
					})
					// console.log(this.selectionFinalFinal);
					let username = JSON.parse(sessionStorage.username)
					let provinceId = JSON.parse(sessionStorage.provinceId)
					let formData = JSON.parse(sessionStorage.form)
					let Batch = (formData.batch).toString()
					let Subject = (formData.subject).toString()
					let selectionFinalFinal = this.selectionFinalFinal
					selectionFinalFinal.forEach((item, index) => {
						selectionFinalFinal[index].username = username
						selectionFinalFinal[index].provinceId = provinceId
						selectionFinalFinal[index].infoVO = {
							"batch": Batch,
							"score": formData.score,
							"subject": Subject,
							"referenceYear": formData.year
						}
					})
					// console.log(selectionFinalFinal)
					sessionStorage.setItem('tableSelection', JSON.stringify(selectionFinalFinal))
					// let form =JSON.parse(sessionStorage.trans_form)
					// let Data={
					// 	'data':selectionFinalFinal,
					// 	'form':form
					// }
					// 将勾选到的数据传到后台数据库
					console.log(selectionFinalFinal)
					this.$axios.post(`${this.baseURL}/chooseVolunteer/insertLselection?provinceId=${provinceId}`,
							selectionFinalFinal)
						.then(res => {
							// console.log(res.data)
						})
				}
				this.$router.push(router)
			},
			//获取分数相当量
			getEquivalent() {
				// let username = JSON.parse(sessionStorage.username)
				// this.$axios.post(`${this.baseURL}/equivalent/myEquivalent?username=${username}`).then(res => {
				// 	this.lastData = res.data.data
				// console.log(this.lastData);
				this.lastData = JSON.parse(sessionStorage.equivalent)
				// console.log(test)
				//请求平行志愿函数放入此成功回调，解决异步问题
				this.getParallelVolunteer()
				// })
			},
			//获取平行志愿组
			getParallelVolunteer() {
				// let year = timeCalculate.timeCalculate() - 1
				// console.log(year);
				// this.loading=true
				let username = JSON.parse(sessionStorage.username)
				let formData = JSON.parse(sessionStorage.form)
				// let equivalent = JSON.parse(sessionStorage.equivalent)
				if (formData.batch == 2) {
					this.showmore = 1
				}
				// let equivalent = JSON.parse(sessionStorage.equivalent) 
				// alert(formData.batch);           
				this.$axios({
						method: 'post',
						url: `${this.baseURL}/parallelVolunteering/getMyParallelVolunteeringFirstTime`,
						data: {
							batch: formData.batch,
							equivalentScore: this.lastData.score,
							provinceId: formData.provinceId,
							subject: formData.subject,
							username: username,
							year: formData.referenceYear,
						}
					})
					.then(res => {
						// console.log(res.data);
						this.loading = false
						let total = res.data.data;
						this.originalData = total
						let number = 0
						let form = JSON.parse(sessionStorage.form)
						// console.log(total);
						//根据volunteeGroup对数组进行分类
						total.forEach(e => {
							if (Object.keys(this.totaldata).indexOf('' + e.volunteerGroup) === -1) {
								this.totaldata[e.volunteerGroup] = []
							}
							this.totaldata[e.volunteerGroup].push(e)
							if (e.volunteerGroup > number) {
								number = e.volunteerGroup
							}
						})
						this.number = number
						sessionStorage.setItem('number', this.number)
						// console.log(this.totaldata);
						//创建符合组件Table.vue浏览的数组
						for (let j = 0; j <= this.number - 1; j++) {
							this.totalData.push(this.totaldata[j + 1])
						}
						// console.log(this.totalData)
						console.log(this.totalData);
						//创建表格颜色数组
						if (this.number > 6) {
							for (let i = 0; i < this.number - 6; i++) {
								this.color.push(this.color[i])
							}
						}
						// console.log(this.color);
						if (formData.batch === 2) {
							this.newExamFlag = true
						} else {
							this.newExamFlag = false
						}
						//新旧高考专业可选数量判断 旧高考数量为this.number即专业组数量  新高考调用接口拿到志愿数量
						if (form.batch == 2) {
							this.$axios.get(
								`${this.baseURL}/VolunteerNumber/getAmbitionNumber?id=${sessionStorage.provinceId}`
							).then(res => {
								// console.log(res.data.data)
								this.volunteerNum = res.data.data.ambitionNumber
								// console.log(this.volunteerNum);
								sessionStorage.setItem('denominator', this.volunteerNum);
							})
						} else {
							// console.log(this.number)
							this.volunteerNum = this.number
							sessionStorage.setItem('denominator', JSON.stringify(this
								.volunteerNum)); //设置缓存海选方案页面的分母，限选优选终选的分母都用此分母
						}
					})
					.catch(err => {
						console.log(err.data);
					})

			},
			//获取专业志愿数量
			getVolunteerNumber() {
				// let provinceId = JSON.parse(sessionStorage.form).provinceId
				let provinceId = sessionStorage.provinceId
				this.$axios.post(`${this.baseURL}/VolunteerNumber/getVolunteerNumber?id=${provinceId}`).then(res => {
					let volunteerNumber = res.data.data.professional_volunteer
					// console.log(volunteerNumber);
					sessionStorage.setItem('volunteerNumber', JSON.stringify(volunteerNumber))
				})
				// console.log(this.subject);
			},
			//获取勾选后的专业志愿选项
			getVolunteername() {
				// let provinceId = JSON.stringify(sessionStorage.provinceId)
				// let username =  JSON.stringify(sessionStorage.username)
				let formData = JSON.parse(sessionStorage.form)
				let Batch = (formData.batch).toString()
				let Subject = (formData.subject).toString()
				let provinceId = sessionStorage.provinceId
				let username = JSON.parse(sessionStorage.username)
				this.$axios.get(
						`${this.baseURL}/chooseVolunteer/getLselection?provinceId=${provinceId}&username=${username}&batch=${Batch}&score=${formData.score}&subject=${Subject}&referenceYear=${formData.year}`
					)
					// this.$axios({
					//     method:'post',
					//     url:`${this.baseURL}/chooseVolunteer/getLselection`,
					//     data:{
					//        provinceId:provinceId,
					//        username:username,
					//     }
					// })
					.then((res) => {
						// console.log(res.data.data)
						this.serverselect = res.data.data
					})
			},
			totalAmount(lyss){
				if(lyss[1]!=null){
				     this.totalNumber += lyss[1]
				    }
				    if(lyss[1]!=null){
				     this.numberarray[lyss[0]-1]=lyss[1]
				    }
			},
			// console.log(lyss)
			
		

		},
		created() {
			this.getEquivalent()
			// this.preparedata() //获取填报准备页面的值
			if (!sessionStorage.getItem('tableSelection')) {
				this.getVolunteername()
			}
			this.getVolunteerNumber()
			
			// this.getParallelVolunteer() //放入getEquivalent函数axios请求成功回调中执行
			// this.calculate = sessionStorage.tableSelection.length;
			this.calculate = 0
			
		},
		// mounted() {
		// 	// if (!sessionStorage.getItem('tableSelection')) {
		// 	// 	this.getVolunteername()
		// 	// }
		// 	// this.getVolunteerNumber()

		// 	// // this.getParallelVolunteer() //放入getEquivalent函数axios请求成功回调中执行
		// 	// // this.calculate = sessionStorage.tableSelection.length;
		// 	// this.calculate = 0
		// }
		
	}
</script>

<style scoped>
	.title1 {
		width: 100%;
		height: 140px;
		font-size: 40px;
		position: absolute;
		font-family: Noto Sans SC;
		margin-bottom: 0%;
		/* line-height: 71px; */
		color: #000000;
		/* margin: 0 auto; */
		font-weight: 700;
		/* margin-top: 80px; */
		letter-spacing: 2px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.content>>>.title{
		height: 10px!important;
	}
	.content>>>.student{
		text-align: center!important;
	}
	.line{
		width: 100%;
		height: 160px;
		font-size: 40px;
		font-family: Noto Sans SC;
		color: #000000;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 50px;
		justify-content: center;
	}
	.content {
		width: 1700px;
		/* min-height: 1100px; */
		background-color: #fff;
		margin: 100px auto;
		margin-bottom: 24px;
		position: relative;
		z-index: 1;
	}
	.explain {
		font-size: 22px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 41px;
		color: rgba(0, 0, 0, 0.45);
		width: 800px;
		/* height: 41px; */
		margin-left: 104px;
		margin-top: 24px;
		text-align: left;
	}

	.number {
		font-size: 35px;
		font-family: Noto Sans SC;
		font-weight: 500;
		/* line-height: 0px; */
		color: #FF3333;
	}

	.more {
		float: right;
		color: rgba(51, 170, 255, 1);
		cursor: pointer;
		position: relative;
		top: 5px
	}

	.item {
		/* min-height:530px; */
		width: 1600px;
		margin: 0 auto;
		margin-top: 50px;
	}

	.subtitle {
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 500;
		line-height: 48px;
		color: #000000;
		text-align: left;
		margin-bottom: 30px;
	}

	.status {
		font-size: 32px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 54px;
		/* color: #F3930C; */
		position: relative;
		left: 10px;
	}

	.select {
		width: 750px;
		/* margin: 0 auto; */
		z-index: 2;
		left:0;
		right:0;
		bottom:0;
		position: fixed;
		margin:auto;
		/* margin-bottom: 70px; */
		/* height: 150px; */
	}

	.select .left {
		width: 347px;
		height: 62px;
		color: rgba(51, 170, 255, 1);
		float: left;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 100;
		line-height: 41px;
		border: 2px solid #33AAFF;
		border-radius: 10px;
	}

	.select .right {
		width: 347px;
		height: 62px;
		float: right;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 100;
		line-height: 41px;
		border-radius: 10px;
	}

	.cover {
		position: absolute;
		top: -210px;
		z-index: 0;
		/* width: 100%; */
		height: 276px;
		/* text-align: center; */
		left: 50%;
		margin-left: -960px;
		overflow: hidden;
	}

	.cover_c {
		position: relative;
		width: 100%;
		/* z-index: 0; */
	}

	.fixed_box {
		width: 250px;
		height: 200px;
		position: fixed;
		background-color: rgba(242, 250, 255, 1);
		box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.16);
		border-radius: 16px;
		/* top: 550px; */
		bottom: 0;
		right: 0;
		z-index: 2;
	}

	.box_title {
		width: 200px;
		height: 28px;
		font-size: 28px;
		font-family: Noto Sans SC;
		font-weight: bold;
		line-height: 48px;
		position: absolute;
		top: 16px;
		left: 16px;
	}

	.selected_number {
		width: 80px;
		height: 56px;
		font-size: 55px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 95px;
		color: #FF3333;
		position: absolute;
		top: 55px;
		left: 30px;
		text-align: right;
	}

	.middle {
		width: 101px;
		height: 86px;
		position: absolute;
		left: 75px;
		top: 70px;
		font-family: Noto Sans SC;
		font-size: 78px;
		line-height: 95px;

	}

	.total_number {
		width: 150px;
		height: 72px;
		font-size: 72px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 122px;
		position: absolute;
		left: 100px;
		top: 80px;
	}

	.message {
		display: flex;
		flex-direction: column;
		width: 505px;
		margin: 0 auto;
		margin-top: 15px;
		margin-bottom: 20px;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 41px;
		color: rgba(0, 0, 0, 0.45);
	}

	.button {
		width: 592px;
		height: 62px;
		border-radius: 10px;
		margin: 0 auto;
		margin-bottom: 30px;
		display: flex;
		flex-direction: row;

	}

	.dialogButtonLeft {
		width: 270px;
		height: 60px;
		border-radius: 10px;
		font-family: Noto Sans SC;
		font-size: 24px;
		font-weight: 300;
		margin-right: 56px;
		border: 2px solid #33AAFF;
		color: rgba(51, 170, 255, 1);
		float: left;

	}

	.dialogButtonRight {
		width: 270px;
		height: 60px;
		border-radius: 10px;
		font-family: Noto Sans SC;
		font-size: 24px;
		font-weight: 300;
		float: right;
	}

	.dialogButtonMiddle {
		width: 270px;
		height: 60px;
		border-radius: 10px;
		font-family: Noto Sans SC;
		font-size: 24px;
		font-weight: 300;
		margin: 0 auto
	}

	.prepare {
		color: rgba(0, 0, 0, 0.45);
		font-weight: 400;
		font-size: 0.114583rem;
		margin-top: 0.125rem;
		text-align: left;
		margin-left: 0.541667rem;
		width: 7.910417rem;
		/* text-indent:2em */
	}

	.preparedata {
		color: #39aaff;
		font-size: 25px;
	}
	.leftside {
		position: fixed;
		right: 2%;
		width: 85px;
		min-height: 48px;
		height: 300px;
		top: 40%;
		z-index: 100;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border-radius:40px;
		/* border: 10px solid black; */
		box-sizing: border-box;
		background: #fff;
		
	}
	.cndns-right-btn {
		border-radius:40px;
		width: 100%;
		height: 30%;
		/* text-align: center; */
		display: block;
		margin-top: 10px;
		
		background-color: #fff;
	}
	
	i {
		font-size: 28px;
	}
	
	.text {
		font-size: 20px;
		font-family: Source Han Sans;
		font-weight: bold;
	}
</style>
